of 2022/3/29 8:57:43

周思 2022/3/29 8:57:51

王燕 2022/3/29 8:57:51

方昱臻 2022/3/29 8:57:56

卢顺天 2022/3/29 8:58:18

卡布达 2022/3/29 8:58:27
马上

讲师-韦华文 2022/3/29 9:00:03
http://itfly.vip/#/home   项目效果

讲师-韦华文 2022/3/29 9:00:18
https://www.kdocs.cn/l/coIfmFFtiXTt 接口文档

林彰铁 2022/3/29 9:00:37
我网卡，进不来

林彰铁 2022/3/29 9:00:42

伍政辉 2022/3/29 9:00:44
真好啊，还不用自己写接口

伍政辉 2022/3/29 9:00:50

林彰铁 2022/3/29 9:01:57

讲师-韦华文 2022/3/29 9:24:54
https://youzan.github.io/vant/v2/

讲师-韦华文 2022/3/29 9:45:44

vant的三种使用方式

  完整引入方式

    1. 安装vant

      # Vue 3 项目，安装最新版 Vant
      npm i vant -S

      # Vue 2 项目，安装 Vant 2
      npm i vant@latest-v2 -S

    2. 在main.js文件中引入 ui并注册

      import Vue from 'vue'
      import Vant from 'vant'
      import 'vant/lib/index.css'

      Vue.use(Vant)

    3. 在任意的中间中直接使用我们的ui

       <van-button type="primary">primary</van-button>

  按需引入

    1. 安装vant

      # Vue 3 项目，安装最新版 Vant
      npm i vant -S

      # Vue 2 项目，安装 Vant 2
      npm i vant@latest-v2 -S

    2. 安装按需依赖包

      # 安装插件
      npm i babel-plugin-import -D

      # 配置babel.config.js

        // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
        module.exports = {
          plugins: [
            ['import', {
              libraryName: 'vant',
              libraryDirectory: 'es',
              style: true
            }, 'vant']
          ]
        };
    3. 在main.js文件中按需引入组件
      import Vue from 'vue'
      import { Button } from 'vant';
      Vue.use(Button)

    4. 可以在任意的组件中使用

      <van-button type="primary">primary</van-button>

  傻瓜式安装方式

    vue add vant

讲师-韦华文 2022/3/29 10:27:08

讲师-韦华文 2022/3/29 10:27:51
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

讲师-韦华文 2022/3/29 10:27:57
npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

史相豪 2022/3/29 10:43:08
https://nodejs.org/download/release/
下载node版本  下载指定版本的64msi文件

讲师-韦华文 2022/3/29 10:52:40
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f4055864c2c3a8012060c8dc7eca.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651114259&t=b2bea24bcf9ed424d86b38453398ebeb

王警冬 2022/3/29 11:12:07

讲师-韦华文 2022/3/29 11:13:39
https://www.bilibili.com/video/BV17U4y1s794?p=108

伍政辉 2022/3/29 11:25:15
一键三连了

郑平滔 2022/3/29 11:29:08

郑平滔 2022/3/29 11:30:35

讲师-韦华文 2022/3/29 12:24:24
有问题装好向日葵

伍政辉 2022/3/29 12:25:05
哈哈哈

讲师-韦华文 8:52:13
fly 邀请您参加腾讯会议
会议主题：fly的快速会议
会议时间：2022/03/30 08:51-09:51 (GMT+08:00)

点击链接直接加入会议：
https://meeting.tencent.com/dm/RgCxrsf7CPjg

#腾讯会议：629-521-190

复制该信息，打开手机腾讯会议即可参与

讲师-韦华文 8:53:01
@全体成员

讲师-韦华文 9:41:23
https://www.cnblogs.com/hahajava/p/10256958.html

讲师-韦华文 9:42:58

讲师-韦华文 11:06:40
<template>
  <div class="comment">
    <van-field
      class="my-field"
      v-model="message"
      rows="2"
      autosize
      :label="label"
      type="textarea"
      maxlength="50"
      :placeholder="placeholder"
      show-word-limit
    />
    <van-button
      type="primary"
      block
    >提交评论</van-button>

    <div class="comment-list">
      <van-card
        desc="描述信息"
        title="商品标题"
      >
        <template #thumb>
          <van-icon
            class="user-icon"
            name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
          />
          <div class="user-name">
            匿名用户
          </div>
        </template>
        <template #price>
          2022-03-30 11:05:02
        </template>
      </van-card>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: '发表评论'
    },
    placeholder: {
      type: String,
      default: '请输入bb的内容'
    }
  },
  data () {
    return {
      message: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.comment {
  .my-field {
    border: 1px solid #eee;
    margin: 8px 0;
  }
  .comment-list {
    margin-top: 8px;
  }
  .user-icon {
    font-size: 60px;
  }
  .user-name {
    font-size: 14px;
  }
  .van-card__desc {
    margin-top: 15px;
  }
}
</style>
